<template>
    <div class="gradeTable">
        <el-table :data="gradeTable" style="width: 100%;" border
            :header-cell-style="{background:'#fafafa',color:'#333',fontWeight:800,fontSize:'12px'}">
            <el-table-column label="时长(分钟)" align='center'>
                <template slot-scope="scope">
                    <div v-if="scope.$index === 0">
                        {{scope.row.delayTime}}(即时)
                    </div>
                    <el-input-number v-model="scope.row.delayTime" controls-position="right" size="mini"
                        placeholder='输入时长' :min="0" v-else>
                    </el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="通知到人" align='center'>
                <template slot-scope="scope">
                    <el-select v-model="scope.row.userIdList" filterable remote placeholder="请选择"
                        :remote-method="remoteMethod" @visible-change='visibleChange' multiple>
                        <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="通知方式" align='center'>
                <template slot-scope="scope">
                    <el-checkbox-group v-model="scope.row.infoType">
                        <el-checkbox :label="0">微信</el-checkbox>
                        <el-checkbox :label="1">AI语音</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-table-column>
            <el-table-column width="50px">
                <template slot-scope="scope">
                    <i class="el-icon-close" style="cursor: pointer;color:#409EFF" @click="del(scope.$index)"></i>
                </template>
            </el-table-column>
        </el-table>
        <el-button icon='el-icon-circle-plus-outline' class='add' type="text" @click="add">添加行</el-button>
    </div>
</template>

<script>
    import {
        userListCopy
    } from '@/api/userController'
    export default {
        data() {
            return {
                userOptions: [],
                gradeTable: [{
                    delayTime: 0,
                    infoType: [],
                    userIdList: []
                }]
            }
        },
        methods: {
            //添加行
            add() {
                this.gradeTable.push({
                    delayTime: 0,
                    infoType: []
                })
            },
            //删除
            del(index) {
                if (index === 0) {
                    this.utils.showMsg('至少保留即时通知', 'warning')
                } else {
                    const id = this.gradeTable[index].id
                    this.gradeTable.splice(index, 1)
                    if(id !== undefined) this.$emit('getRemoveIds',id)
                }
            },
            //用户下拉
            getUserList:async function(data){
                const res = await userListCopy(data)
                if (res.code == 200) {
                    this.userOptions = res.data
                }
            },
            //下拉框打开时
            visibleChange(flag) {
                if (flag && !this.userOptions.length) this.remoteMethod('')
            },
            remoteMethod(query) {
                this.getUserList({
                    name: query
                })
            },
            close() {
                this.gradeTable = [{
                    delayTime: 0,
                    infoType: [],
                    userIdList: []
                }]
            },
            handleData(data){
                return data.split(',').map(Number)
            },
            updateTable(list){
                this.gradeTable = list.map(i => {
                    return {
                        id:i.id,
                        delayTime: i.delayTime,
                        infoType: this.handleData(i.infoType),
                        userIdList: this.handleData(i.userIds)
                    }
                })
            },
            getTabelInfo() {
                const jsonTable = JSON.parse(JSON.stringify(this.gradeTable))
                jsonTable.forEach(i => {
                    i.infoType = i.infoType.toString()
                })
                return jsonTable
            }
        }
    }
</script>

<style lang="less" scoped>
    .gradeTable {}
</style>